<%--
  Created by IntelliJ IDEA.
  User: Eric
  Date: 2019/9/28
  Time: 20:10
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的导游</title>

    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link href="${path}/js/dist/summernote.css" rel="stylesheet" />

    <!-- 引入外部的css样式 -->
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/animate.css" type="text/css">
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/font-awesome.css?v=4.4.0" type="text/css">

    <!-- 引用自己写的css样式 -->
    <link href="${path}/css/index/index.css" rel="stylesheet" type="text/css">


    <!-- 表单 -->
    <link rel="stylesheet" type="text/css" href="${path}/css/daoyou/normalize.css" />

    <link rel="stylesheet" type="text/css" href="${path}/css/daoyou/demo.css" />
    <link rel="stylesheet" type="text/css" href="${path}/css/daoyou/component.css" />


    <style>
        #jiedan th {
            text-align: center;
            margin: 0 auto;
        }

        #jiedan td {
            text-align: center;
            margin: 0 auto;
        }
    </style>

</head>

<body>


<%@include file="../common/nav_top.jsp"%>

<p style="font-size:25px;color: black;text-align:center ;font-family:Georgia, serif; margin-top:30px">
    Welcome guests from afar
    <img   style="width: 30px;height:30px" src="${path}/imgs/travler/flower.png">
</p>


<div class="container" style="margin-top: 20px;">
    <div class="row">


        <!-- 侧边栏 -->
        <div class="col-md-2">

            <div style="height: 60px;text-align: center;background-color: rgb(235, 243, 247); text-align: center;line-height:60px; border-bottom:1px solid #ddd;color: #555; width: 180px;"
                >

                <span href="" style="text-decoration: none;font-size: 20px;">
                    我的悠U
                </span>
            </div>

            <div style="height: 45px;text-align: center;background-color: rgb(235, 243, 247); text-align: center;line-height:45px; border-bottom:1px solid #ddd;;color: #555; width: 180px;"
                 onclick="fd()"  >
                <span class="glyphicon glyphicon-bell"></span>
                <span style="text-decoration: none;cursor: pointer;font-size: 16px;">
                    我的订单
                </span>
            </div>


            <div style="height: 45px;text-align: center;background-color: rgb(235, 243, 247); text-align: center;line-height:45px; border-bottom:1px solid #ddd;;color: #555; width: 180px;"
                 onclick="f3()">
                <span class="glyphicon glyphicon-magnet "></span>
                <a style="text-decoration: none;cursor: pointer;font-size: 16px;">
                    路线规划
                </a>
            </div>


            <div style="height: 45px;text-align: center;background-color: rgb(235, 243, 247); text-align: center;line-height:45px; border-bottom:1px solid #ddd;;color: #555; width: 180px;"
                 onclick="f4()">
                <span class="glyphicon glyphicon-tasks "></span>
                <span style="text-decoration: none;cursor: pointer;font-size: 16px;">
                    我的状态
                </span>
            </div>

            <div style="height: 45px;text-align: center;background-color: rgb(235, 243, 247); text-align: center;line-height:45px; border-bottom:1px solid #ddd;;color: #555; width: 180px;"
                 onclick="f5()">
                <span class="glyphicon glyphicon-th-large"></span>
                <a style="text-decoration: none;cursor: pointer;font-size: 16px;">
                    正在执行
                </a>
            </div>
            <div style="height: 45px;text-align: center;background-color: rgb(235, 243, 247); text-align: center;line-height:45px; border-bottom:1px solid #ddd;;color: #555; width: 180px;"
                 onclick="f6()">
                <span class="glyphicon glyphicon-picture"></span>
                <a style="text-decoration: none;cursor: pointer;font-size: 16px;">
                    上传照片
                </a>
            </div>


        </div>
        <!-- 侧边栏 -->


        <!-- 主体 -->

        <div class="col-md-9 " id="dingdan" style="margin-bottom: 30p;margin-left:60px;display:block">
              <!-- 订单详情 -->
            <c:forEach items="${requestScope.bill}" var="b">
              <div class="col-md-12"
                 id="${b.orders.id}"  style="height:50px; line-height:50px;margin-top:10px;border:1px solid #ddd;border-radius:5px;background-color: rgb(235, 243, 247);">

                    <span style="margin-left:0px">
                        🔔
                    </span>
                  <span style="margin-left: 10px;font-size: 15px;">

                        申请人:
                      <c:if test="${b.orders.applyName.length()==3}" >
                         ${b.orders.applyName}
                      </c:if>
                          <c:if test="${b.orders.applyName.length()==2}" >
                              ${b.orders.applyName}&nbsp;&nbsp;&nbsp;
                          </c:if>
                    </span>


                  <span style="margin-left: 30px;font-size: 15px;">

                        出行人数: ${b.orders.peopleSum}人
                    </span>
                  <span style="margin-left: 30px;font-size: 15px;">
                        出行日期: ${b.startTime}
                    </span>
                  <span style="margin-left: 30px;font-size: 15px;">
                        出行天数:${b.orders.days}天
                    </span>
                  <span style="margin-left: 30px;font-size: 15px;">
                        性别:
                      <c:if test="${!empty b.sex}" >
                           ${b.sex}
                      </c:if>
                       <c:if test="${empty b.sex}" >
                             无
                       </c:if>
                    </span>

                  <button type="button" onclick="access(${b.orders.id})" class="btn btn-success"
                          style="font-size: 13px;margin-left: 40px;">同意</button>
                  <button type="button" onclick="Refuse(${b.orders.id})" class="btn btn btn-danger"
                          style="font-size: 13px;margin-left: 10px;">拒绝</button>

              </div>
            </c:forEach>

            <!-- end 订单详情 -->
        </div>


        <%--<!-- 图表格 -->--%>
        <%--<div class="col-md-9 " id="tubiao" style="margin-bottom: 30p;margin-left:60px;display:none">--%>

            <%--<div id="main" style="width: 600px;height:400px;"></div>--%>
            <%--<p style="margin-left: 250px;">本季度业绩一览表</p>--%>

        <%--</div>--%>
        <%--<!-- 图标end -->--%>



        <!--正在接单详情 -->

        <div class="col-md-9 " id="jiedan" style="margin-bottom: 30p;margin-left:60px;display: none">

        </div>

        <!--正在接单详情 -->




        <!-- 修改路线 -->
        <div class="col-md-9 " id="round" style="margin-bottom: 30p;margin-left:60px;display:none">
            <div class="col-md-12">
                <div style="height: 50px;background-color: rgb(235, 243, 247);text-align: center;line-height:50px;font-size: 20px">
                    <p>示例:拙政园*苏州博物馆*平江路*金鸡湖景区</p>
                    <div class="col-md-12" style="margin-top:30px " >
                          <textarea   readonly="readonly"  id="mytext"  cols="70" rows="4" style="background-color: rgb(235, 243, 247);">

                              <c:if test="${requestScope.texts!=null}">
                                  ${requestScope.texts.guideText}
                              </c:if>
                        </textarea>

                    </div>
                    <button  class="btn btn-warning" onclick="func1()">修改</button>
                    <button id="send"  class="btn btn-success" onclick="func2()" disabled="disabled">提交</button>
                </div>
            </div>

        </div>

        <!-- 修改路线结束 -->


        <%-- 我的状态--%>
        <div class="col-md-9"  id="starta" style="margin-bottom: 30p;margin-left:60px;display:none">

            <select class="form-control" id="perosonstart" >
                <c:forEach var="a" begin="0" end="1" step="1">

                    <c:choose>
                        <c:when test="${start.status==(a-1)}">
                            <option value="${start.status}" selected>
                                <c:if test="${start.status==0}">
                                空闲
                            </c:if>
                                <c:if test="${start.status==-1}">
                                    离开
                                </c:if>

                            </option></c:when>
                        <c:otherwise>
                            <option value="${a-1}">
                                <c:if test="${(a-1)==0}">
                                    空闲
                                </c:if>
                                <c:if test="${(a-1)==-1}">
                                    离开
                                </c:if>
                            </option>
                        </c:otherwise>
                    </c:choose>
                </c:forEach>
            </select>
            <div class="col-md-12" style="margin-top:25px;text-align: center">
                <button id="selectstart"  class="btn btn-success" onclick="mystart()">确定</button>
            </div>
               </div>




        <%--上传照片--%>
        <div class="col-md-9 " id="tubiao" style="margin-bottom: 30p;margin-left:60px;display: none">

            <c:forEach begin="${requestScope.num}" end="4" step="1" var="s">
            <div class="col-md-6" style="margin-top:30px;">
                <input value="" id="p${5-s}" style="display: none;">
                <form method="post" enctype="multipart/form-data" id="imgform${5-s}">
                    <c:if test="${5-s==1}">
                    <input type="file" name="myfile" id="myfile">
                    </c:if>
                    <c:if test="${5-s!=1}">
                        <input type="file" name="myfile${5-s}" id="myfile${5-s}">
                    </c:if>

                </form>


                <div id="preview${5-s}" style="width:  270px;height:270px;border:2px solid white">
                    <input type="hidden" id="photoFlag${5-s}" value="false">
                </div>
            </div>
            </c:forEach>

            <c:if test="${requestScope.num<4}" >
                <div class="col-md-12" style="margin-top:25px;text-align: center">
                    <button   class="btn btn-success"onclick="updown()">上传</button>
                </div>
            </c:if>




        </div>

    </div>

    </div>




</div>

<!--主体-->
</div>


<div style="height:500px">

</div>

<%@include file="../common/nav_bottom.jsp"%>






<!--引入bootstrap的js文件-->
<script src="${path}/plugins/jquery/jquery.min.js"></script>

<script src="${path}/plugins/bootstrap/js/bootstrap.js"></script>

<script src="${path}/js/daoyou/echarts.min.js"></script>

<script src="${path}/js/daoyou/jquery.ba-throttle-debounce.min.js"></script>

<script src="${path}/js/daoyou/jquery.stickyheader.js"></script>

<%--七牛云--%>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src=" https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.js"></script>
<script type="text/javascript" src="${path}/js/edit/ajaxfileupload.js"></script>

<script>

    $('#myfile').change( function() {
        $("#imgform1").ajaxSubmit({
            url: "${path}/upload",
            method: 'POST',
            datType: 'json',
            success: function (data) {
                document.getElementById("p1").value=data.imgUrl;

                var ele = "<img src=\"\" style='max-width: 270px;max-height: 270px' id='photo1'/>"
                $("#preview1").append(ele);//编程一个jquery的对象
                $("#preview1").find("img").attr("src",data.imgUrl);//调用jquery的方法找到
//                        图片的标签的名称，再设置里面的src的属性的值

            },
            error: function (data) {
                alert(data);
            }
        })
    })


    $('#myfile2').change( function() {
        $("#imgform2").ajaxSubmit({
            url: "${path}/upload_two",
            method: 'POST',
            datType: 'json',
            success: function (data) {
                document.getElementById("p2").value=data.imgUrl;
                var ele = "<img src=\"\" style='max-width: 270px;max-height: 270px'  id='photo2'/>"
                $("#preview2").append(ele);//编程一个jquery的对象
                $("#preview2").find("img").attr("src",data.imgUrl);//调用jquery的方法找到
//                        图片的标签的名称，再设置里面的src的属性的值
            },
            error: function (data) {
                alert(data);
            }
        })
    })

    $('#myfile3').change( function() {
        $("#imgform3").ajaxSubmit({
            url: "${path}/upload_three",
            method: 'POST',
            datType: 'json',
            success: function (data) {
                document.getElementById("p3").value=data.imgUrl;
                var ele = "<img src=\"\" style='max-width: 270px;max-height: 270px'  id='photo3'/>"
                $("#preview3").append(ele);//编程一个jquery的对象
                $("#preview3").find("img").attr("src",data.imgUrl);//调用jquery的方法找到
//                        图片的标签的名称，再设置里面的src的属性的值
            },
            error: function (data) {
                alert(data);
            }
        })
    })

    $('#myfile4').change( function() {
        $("#imgform4").ajaxSubmit({
            url: "${path}/upload_four",
            method: 'POST',
            datType: 'json',
            success: function (data) {
                document.getElementById("p4").value=data.imgUrl;
                var ele = "<img src=\"\" style='max-width: 270px;max-height: 270px'  id='photo4'/>"
                $("#preview4").append(ele);//编程一个jquery的对象
                $("#preview4").find("img").attr("src",data.imgUrl);//调用jquery的方法找到
//                        图片的标签的名称，再设置里面的src的属性的值
            },
            error: function (data) {
                alert(data);
            }
        })
    })

    function  updown() {

        var count=0;
       var  str="";
        for(var i=1;i<5;i++){
           if(document.getElementById("p"+i)!=null&&document.getElementById("p"+i).value.length>0){
               count++;
                  str+=document.getElementById("p"+i).value+",";
           }
        }

        if(count==0){
            alert("请选择图片");
            return;
        }
        $.post("${path}/guide/addphoto",{photo:str},function (data) {

            if(data.flag){
                 alert("上传成功");
                 var url="${path}/guidehome/home"
                window.location=url;
            }else{
                alert("上传失败");
            }
        })




    }





   function access(obj) {
       $.post("${path}/guidehome/getbill/"+obj,null,function (data) {
           console.log(data)
           if(data.flag){
              alert(data.message);
               document.getElementById(obj).style.display="none";
           }else{
               alert(data.message);
           }

       })
   }
function Refuse(obj){
    $.post("${path}/guidehome/delbill/"+obj,null,function (data) {
        console.log(data);
        document.getElementById(obj).style.display="none";
        console.log(data);
    })

}
 function  f5(){
     document.getElementById("dingdan").style.display = "none";
     document.getElementById("tubiao").style.display = "none";
     document.getElementById("round").style.display = "none";
     document.getElementById("jiedan").style.display = "block";
     document.getElementById("starta").style.display = "none";

     $.post("${path}/guidehome/getBeing",null,function (data){
if(data.flag){
    var str="";


    console.log(data);
    for(var i=0;i< data.data.length;i++){

        str+="<table style=\"margin-bottom:0px\">";
        str+="<thead>" ;
        str+="<tr>";
        str+= "<th>名称</th>";
        str+="<th>详情</th>" ;
        str+="</tr>";
        str+= "</thead>";
        str+="<tbody>";
        str+= "<tr>";
        str+= "<td class=\"user-name\">名字</td>";
        str+=" <td class=\"user-email\">"+data.data[i].orders.applyName+"</td>";
        str+="</tr>";
        str+=  " <tr>";
        str+=   "<td class=\"user-name\">性别</td>";
        if(data.data[i].sex==null){
            str+="<td class=\"user-email\">"+data.data[i].sex+"</td>";
        }
        if(data.data[i].sex!=null){
            str+="<td class=\"user-email\">"+data.data[i].sex+"</td>";
        }
        str+="</tr>";
        str+=  "<tr>";
        str+=   "<td class=\"user-name\">出行日期</td>";
        str+="  <td class=\"user-email\">"+data.data[i].startTime+"</td>";
        str+="</tr>";
        str+="<tr>";
        str+=  "<td class=\"user-name\">出行天数</td>";
        str+="<td class=\"user-email\">"+data.data[i].orders.days+"</td>";
        str+="</tr>" ;
        str+=  "<tr>" ;
        str+=  "<td class=\"user-name\">联系方式</td>";
        str+="<td class=\"user-email\">"+data.data[i].orders.phoneNumber+"</td>";
        str+=" </tr>" ;
        str+=  "<tr>" ;
        str+=   "<td class=\"user-name\">出行人数</td>";
        str+=" <td class=\"user-email\">"+data.data[i].orders.peopleSum+"</td></tr></tbody></table>";

        str+="<div style=\"text-align: center;margin-top:15px; margin-bottom: 25px\">";
        str+="<button onclick='cancelBill("+data.data[i].orders.id+")' type=\"button\" class=\"btn btn-danger\">退单</button>";
        str+="</div>";

    }
    $("#jiedan").html(str);

}else{
    alert("暂无");
}
     })
}
function  fd() {
    document.getElementById("dingdan").style.display = "block";
    document.getElementById("tubiao").style.display = "none";
    document.getElementById("round").style.display = "none";
    document.getElementById("jiedan").style.display = "none";
    document.getElementById("starta").style.display = "none";
}
function  f4() {
    document.getElementById("dingdan").style.display = "none";
    document.getElementById("tubiao").style.display = "none";
    document.getElementById("round").style.display = "none";
    document.getElementById("jiedan").style.display = "none";
    document.getElementById("starta").style.display = "block";
}
function  f3(){
    document.getElementById("dingdan").style.display = "none";
    document.getElementById("tubiao").style.display = "none";
    document.getElementById("jiedan").style.display = "none";
    document.getElementById("round").style.display = "block";
    document.getElementById("starta").style.display = "none";
}
   function  f6(){
       document.getElementById("dingdan").style.display = "none";
       document.getElementById("tubiao").style.display = "block";
       document.getElementById("jiedan").style.display = "none";
       document.getElementById("round").style.display = "none";
       document.getElementById("starta").style.display = "none";
   }


//修改路线
   function func1(){
       $("#mytext").prop("readonly",false);
       var bu = document.getElementById("send");
       bu.disabled = !"disabled ";
   }
   function func2(){
       var a=document.getElementById("mytext").value.trim();
       if(a.length<=0){
           alert("请填写路线");
           return;
       }else{

           $.post("${path}/guidehome/getRout",{guideText:a},function (data) {
               if(data.flag==true){
                   $("#mytext").prop("readonly",true);
                   var bu = document.getElementById("send");
                   bu.disabled = "disabled ";
                   alert("修改成功")
               }else{
                   alert("修改失败");
               }
           })
       }
   }

//修改个人状态

    function  mystart() {
     var d= document.getElementById("perosonstart").value;

     $.post("${path}/guidehome/setStart/"+d,null,function (data){
         if(data.flag){
                   alert("修改成功");
         }else{
             alert("出错啦!");
         }
     })
    }


    //退单
    function  cancelBill(obj) {
    if(confirm("退单会消耗个人信誉噢!")){
  $.post("${path}/guidehome/setOrders",{id:obj},function (data){
      if(data.flag){
          alert("取消成功");

          f5();
      }else {
          alert("取消失败");
      }
      return;
  })
    }else {
        return;
    }
    }

</script>



</body>

</html>